// 混淆 -- 骨架屏动画效果
@mixin skeleton-loading {
  background: linear-gradient(135deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: el-skeleton-loading 1.4s ease infinite;

  @keyframes el-skeleton-loading {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
}

// 使用
.skelton {
  width: 500px;
  height: 30px;
  margin: 10px auto;

  @include skeleton-loading;
}